<template>
  <div class="collectBox">
    <!-- 购物车头部 -->
    <div class="collectHeader">
      <i class="el-icon-shopping-cart-full" style="color: rgb(255, 103, 0)"></i>
      <small style="font-size: 12px; color: #777">
        温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</small
      >
    </div>

    <div v-show="$store.state.shopping != ''">
      <div class="table">
        <!-- 数据 -->
        <table width="100%">
          <tr height="80">
            <td width="100">
              <input type="checkbox" @change="CheckBox" :checked="flag" v-model="visibles"/><small
                ref="checkAll"
              >
                全选</small
              >
            </td>
            <td width="100"></td>
            <td width="300">商品名称</td>
            <td>单价</td>
            <td width="120">数量</td>
            <td>小计</td>
            <td>操作</td>
          </tr>
          <tr height="80" v-for="(item, index) in $store.state.shopping" :key="index">
            <td>
              <input type="checkbox" :checked="flag" @change="CheckBoxNo(flag)" v-model="flag"/>
            </td>
            <td>
              <img :src="$getImg + item.product_picture" alt="" />
            </td>
            <td class="tabHover">
              {{ item.product_name }}
            </td>
            <td>
              {{ item.product_price + "元" }}
            </td>
            <td>
              <el-input-number
                v-model="item.product_sales"
                @change="handleChange"
                :min="1"
                :max="item.product_num"
                size="mini"
              />
            </td>
            <td style="color: orangered">
              {{ item.product_price + "元" }}
            </td>
            <td>
              <!-- <i class="el-icon-error" @click="remGood(item.product_id)"></i> -->
              <el-popover placement="left" width="160" v-model="visible">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini" @click="remGood(item.product_id)"
                    >确定</el-button
                  >
                </div>
                <el-button slot="reference" class="btnSty">x</el-button>
              </el-popover>
            </td>
          </tr>
        </table>
      </div>
      <!-- 结算 -->
      <div class="close">
        <p style="color: #888">
          <span>
            <span class="shoppingHover" style="padding-right: 15px">继续购物</span>
            |
            <span style="padding-left: 15px">
              共<small>{{ $store.state.shopping.length }}</small
              >件商品，已选择
              <small v-show="flag == true">{{ $store.getters.goodsNum }}</small>
              <small v-show="!flag">0</small>
              件
            </span>
          </span>
          <span>
            <small
              >合计：<strong v-show="flag">{{ $store.getters.cont }}元</strong>
              <strong v-show="!flag">0元</strong>
            </small>
            <button ref="Btn" @click="closing(flag)">去结算</button>
          </span>
        </p>
      </div>
    </div>

    <!-- 没有商品时显示 -->
    <div class="reminder" v-show="$store.state.shopping == ''">
      <div class="logoImg"></div>
      <div>
        <h1 class="size">您的购物车还是空的！</h1>
        <p>快去购物吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      multipleSelection: [],
      flag: false,
      visible: false,
      visibles: false,
    };
  },
  mounted() {},
  methods: {
    //   表格
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 步进器
    handleChange(value) {
        console.log(value);
      this.flag = true;
      this.StyColors(this.flag); //调用改变样式封装方法
      this.$notify({
        title: "成功",
        message: "修改购物车数量成功",
        type: "success",
      });
    },

    // 全选多选框状态
    CheckBox() {
      this.flag = !this.flag;
      this.StyColors(this.flag); //调用改变样式封装方法
    },

    //
    CheckBoxNo(flag) {
      console.log(flag);
      this.flag = true;
      this.visibles = !this.visibles
      //   判断如何以下商品有一个么有选中 全选为false
    },

    //删除购物车的商品
    remGood(id) {
      console.log(id);
      this.visible = false;
      // 将当前id发到vuex进行删除操作
      this.$store.commit("delShopping", id);
    },

    //点击结算跳转到登录页面
    closing(flag) {
      if (flag == true) {
        this.$router.push("/confirmOrder");
      }
    },

    // 封装一个改变样式方法
    StyColors(flag) {
      if (flag == true) {
        //   结算按钮高亮
        let btn = this.$refs.Btn;
        btn.style.background = "orangered";
        btn.style.color = "#fff";
        // 全选字体高亮
        let checkAll = this.$refs.checkAll;
        checkAll.style.color = "#409EFF";
      } else {
        //   否则不高亮
        let btn = this.$refs.Btn;
        btn.style = "none";
        let checkAll = this.$refs.checkAll;
        checkAll.style.color = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-shopping-cart-full::after {
  content: "我的购物车";
  color: black;
}
.table {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  text-align: center;
}
table,
.close {
  background: #fff;
}
img {
  width: 100px;
  height: 100px;
}
.tabHover:hover {
  color: orangered;
}
.btnSty:hover {
  background: orangered;
}
.el-icon-error:hover {
  color: orangered;
}

.close {
  margin: 25px 40px 0 40px;
  padding-left: 20px;
  p {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  small {
    color: orangered;
  }
  strong {
    font-size: 30px;
  }
  button {
    width: 200px;
    height: 70px;
    border: none;
    background: #ccc;
    color: #888;
    font-size: 20px;
    margin-left: 50px;
  }
}
.btnSty {
  border: none;
  color: #fff;
  background: black;
  padding: 2px 6px;
  border-radius: 50px;
}
</style>
